<template>
  <div class="register-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>

    <!-- 注册卡片 -->
    <div class="register-card">
      <!-- Logo和标题区域 -->
      <div class="register-header">
        <div class="logo-wrapper">
          <svg class="logo-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" rx="12" fill="url(#logoGradient)"/>
            <path d="M24 12C17.373 12 12 17.373 12 24C12 30.627 17.373 36 24 36C30.627 36 36 30.627 36 24C36 17.373 30.627 12 24 12ZM28 25H25V28C25 28.552 24.552 29 24 29C23.448 29 23 28.552 23 28V25H20C19.448 25 19 24.552 19 24C19 23.448 19.448 23 20 23H23V20C23 19.448 23.448 19 24 19C24.552 19 25 19.448 25 20V23H28C28.552 23 29 23.448 29 24C29 24.552 28.552 25 28 25Z" fill="white"/>
            <defs>
              <linearGradient id="logoGradient" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
                <stop stop-color="#5FBFAA"/>
                <stop offset="1" stop-color="#7DD3C0"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <h1 class="system-title">用户注册</h1>
        <p class="system-subtitle">Register New Account</p>
      </div>

      <!-- 注册表单 -->
      <el-form
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerRules"
        class="register-form"
        size="large"
      >
        <el-form-item prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
            :prefix-icon="User"
            clearable
          />
        </el-form-item>

        <el-form-item prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            :prefix-icon="Message"
            clearable
          />
        </el-form-item>

        <el-form-item prop="phone">
          <el-input
            v-model="registerForm.phone"
            placeholder="请输入手机号"
            :prefix-icon="Phone"
            clearable
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请确认密码"
            :prefix-icon="Lock"
            show-password
            @keyup.enter="handleRegister"
          />
        </el-form-item>

        <el-form-item prop="agree">
          <el-checkbox v-model="registerForm.agree">
            我已阅读并同意<a href="#" class="agreement-link">《用户协议》</a>和<a href="#" class="agreement-link">《隐私政策》</a>
          </el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="register-button"
            :loading="loading"
            @click="handleRegister"
          >
            注 册
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button
            class="back-button"
            @click="goToLogin"
          >
            返回登录
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 底部信息 -->
      <div class="register-footer">
        <p>© 2025 AI体质分析系统 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Lock, Message, Phone } from '@element-plus/icons-vue'

const router = useRouter()
const registerFormRef = ref(null)
const loading = ref(false)

const registerForm = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  agree: false
})

// 自定义验证规则
const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度不能少于6位'))
  } else {
    if (registerForm.confirmPassword !== '') {
      registerFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validateConfirmPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const validateAgree = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请阅读并同意用户协议和隐私政策'))
  } else {
    callback()
  }
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { validator: validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validateConfirmPassword, trigger: 'blur' }
  ],
  agree: [
    { validator: validateAgree, trigger: 'change' }
  ]
}

const handleRegister = async () => {
  if (!registerFormRef.value) return
  
  await registerFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      
      // 模拟注册请求
      setTimeout(() => {
        loading.value = false
        
        // 显示成功提示并提醒需要审核
        ElMessageBox.alert(
          '您的注册申请已提交成功！<br/><br/>系统管理员将在1-3个工作日内完成审核。<br/>审核通过后，我们将通过邮箱和短信通知您。',
          '注册成功',
          {
            confirmButtonText: '返回登录',
            dangerouslyUseHTMLString: true,
            type: 'success',
            center: true,
            callback: () => {
              router.push('/login')
            }
          }
        )
      }, 1000)
    }
  })
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.register-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gradient);
  overflow: hidden;

  .bg-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      
      &.circle-1 {
        width: 400px;
        height: 400px;
        top: -100px;
        left: -100px;
        animation: float 8s infinite ease-in-out;
      }
      
      &.circle-2 {
        width: 300px;
        height: 300px;
        bottom: -50px;
        right: -50px;
        animation: float 10s infinite ease-in-out reverse;
      }
      
      &.circle-3 {
        width: 200px;
        height: 200px;
        top: 50%;
        right: 10%;
        animation: float 12s infinite ease-in-out;
      }
    }
  }

  .register-card {
    width: 450px;
    max-width: 90%;
    padding: 48px 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 1;

    .register-header {
      text-align: center;
      margin-bottom: 32px;

      .logo-wrapper {
        margin-bottom: 24px;
        display: inline-block;
        animation: pulse 2s infinite;

        .logo-icon {
          width: 80px;
          height: 80px;
          filter: drop-shadow(0 4px 12px rgba(95, 191, 170, 0.3));
        }
      }

      .system-title {
        font-size: 32px;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: 10px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .system-subtitle {
        font-size: 14px;
        color: var(--color-text-light);
        letter-spacing: 1px;
      }
    }

    .register-form {
      :deep(.el-form-item) {
        margin-bottom: 20px;
      }

      :deep(.el-input__wrapper) {
        padding: 12px 15px;
        border-radius: var(--radius-sm);
      }

      :deep(.el-checkbox__label) {
        font-size: 13px;
        color: var(--color-text-secondary);
      }

      .agreement-link {
        color: var(--color-primary);
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }

      .register-button {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        margin-top: 10px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
        border: none;
        box-shadow: var(--shadow-md);
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-lg);
        }
      }

      .back-button {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;
        border: 2px solid var(--color-primary-light);
        color: var(--color-primary);
        background: transparent;
        
        &:hover {
          background: var(--color-primary-lighter);
          transform: translateY(-2px);
        }
      }
    }

    .register-footer {
      margin-top: 24px;
      text-align: center;
      
      p {
        font-size: 12px;
        color: var(--color-text-light);
        margin: 5px 0;
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
</style>

